<template>
	<view>
		<view class="" style="position: fixed;top: 0;left: 0;right: 0;background-color: rgb(0, 116, 208);z-index: 9;">
			<view class="" :style="{'height':  statusBarHeight+'px'}"></view>
			<view class="" style="display: flex;align-items: center;justify-content: center;position: relative;" :style="{'width':windowWidth+'px','height':  naviBarHeight+'px'}">
				<view @click="toBack" class="" style="position:absolute;left: 20rpx;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: #FFFFFF;">
					<image src="/static/icon/fanhui.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
					返回
				</view>
				<view style="font-size: 32rpx;color: #FFFFFF;">通讯录</view>
			</view>
		</view>
		<view class="" :style="{'height': Number(statusBarHeight + naviBarHeight)+'px'}"></view>
		
		<view class="" style="padding: 10rpx 40rpx;background-color: rgb(0, 116, 208);position: relative;display: flex;align-items: center;position: fixed;left: 0;right: 0;z-index: 9;">
			<input type="text" value="" placeholder="选择选项" style="height: 85rpx;background-color: #FFFFFF;border-radius: 16rpx;flex: 1;padding-left: 70rpx;" />
		
			<view class="" style="position: absolute;display: flex;align-items: center;justify-content: center;color: rgb(144,144,144);margin-left: 25rpx;">
				<image src="../../static/icon/search.png" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;" mode=""></image>
				
			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
		<view class="" v-for="(item,index) in 10" :key="index" @click="callPhone" style="flex: 1;border-bottom: 1px solid rgb(212,212,212);height: 151rpx;display: flex;flex-direction: column;justify-content: center;padding-left: 60rpx;padding-right: 40rpx;">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				
				<view class="" style="color: rgb(26,26,26);">
					张国立 <text style="color: rgb(102,102,102);">[部长]</text>
				</view>
				<image src="../../static/icon/go.png"  style="width: 17rpx;height: 29rpx;" mode=""></image>
			</view>
			<view class="" style="display: flex;align-items: center;color: rgb(168,168,168);font-size: 27rpx;">
				<view class="">
					部门:党委宣传部 
				</view>
				<view class="" style="margin-left: 110rpx;">
					电话:15111111111
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowWidth: 0, //屏幕宽度
				windowHeight: 0, //屏幕高度
				titleHeight: 0, //状态栏和导航栏的总高度
				statusBarHeight: 0, //状态栏高度
				naviBarHeight: 0, //导航栏高度
			};
		},
		onLoad() {
			let self = this;
			const res = uni.getSystemInfoSync()
			const system = res.platform
			self.statusBarHeight = res.statusBarHeight
			if (system === 'android') {
				self.titleHeight = (48 + self.statusBarHeight)
			} else if (system === 'ios') {
				self.titleHeight = (44 + self.statusBarHeight)
			}
			self.naviBarHeight = self.titleHeight - self.statusBarHeight
		
			self.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			self.windowWidth = uni.getSystemInfoSync().windowWidth;
			self.windowHeight = uni.getSystemInfoSync().windowHeight;
		
		},
		methods: {

			toBack(){
				uni.navigateBack({
				    delta: 1
				});
			},
			callPhone(){
				uni.makePhoneCall({
				    phoneNumber:'15100295032'
				});
			}
		}
	}
</script>

<style lang="scss">

</style>
